<template>
  <div class="user-profile-container">
    <!-- 顶部导航栏 -->
    <div class="profile-header">
      <div class="back-button" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
      </div>
      <div class="header-title">我的资料</div>
      <div class="placeholder"></div>
    </div>
    
    <!-- 提示信息 -->
    <div class="profile-tip">
      只需1分钟完成认证，即可申请借款~
    </div>
    
    <!-- 资料列表 -->
    <div class="profile-list">
      <!-- 身份信息 -->
      <div class="profile-item" @click="navigateTo('identity')">
        <div class="item-icon identity-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="item-content">
          <div class="item-main">
            <div class="item-title">身份信息</div>
            <div class="item-desc">*已完成了解您的基本情况</div>
          </div>
          <div>
            <span :class="['item-status', identityCompleted ? 'completed' : '']">
              {{ identityCompleted ? '已完善' : '请完善身份信息' }}
            </span>
            <el-icon class="item-arrow"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
      
      <!-- 单位信息 -->
      <div class="profile-item" @click="navigateTo('company')">
        <div class="item-icon personal-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="item-content">
          <div class="item-main">
            <div class="item-title">单位信息</div>
            <div class="item-desc">*已完成了解您的单位信息</div>
          </div>
          <div>
            <span :class="['item-status', personalCompleted ? 'completed' : '']">
              {{ personalCompleted ? '已完善' : '请完善单位信息' }}
            </span>
            <el-icon class="item-arrow"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
      
      <!-- 提现银行卡 -->
      <div class="profile-item" @click="navigateTo('bankcard')">
        <div class="item-icon bankcard-icon">
          <el-icon><CreditCard /></el-icon>
        </div>
        <div class="item-content">
          <div class="item-main">
            <div class="item-title">提现银行卡</div>
            <div class="item-desc">银行卡添加</div>
          </div>
          <div>
            <span v-if="bankCardCount == 0" class="item-status">请填写银行卡信息</span>
            <span v-else class="item-status">已绑定{{ bankCardCount }}张银行卡</span>
            <el-icon class="item-arrow"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
      
      <!-- 手机号认证 -->
      <!--<div class="profile-item" @click="navigateTo('phone')">
        <div class="item-icon phone-icon">
          <el-icon><Iphone /></el-icon>
        </div>
        <div class="item-content">
          <div class="item-main">
            <div class="item-title">手机号认证</div>
            <div class="item-desc">请验证您的手机号</div>
          </div>
          <div>
            <span class="item-status">未验证</span>
            <el-icon class="item-arrow"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>-->
    </div>
    
    <!-- 补充资料分隔区域 -->
    <div class="section-divider">
      <div class="divider-text">补充资料可提高审核通过率</div>
    </div>
    
    <!-- 补充资料 -->
    <div class="profile-list">
      <div class="profile-item additional-item" @click="navigateTo('additional')">
        <div class="item-icon additional-icon">
          <el-icon><Files /></el-icon>
        </div>
        <div class="item-content">
          <div class="item-main">
            <div class="item-title">补充资料</div>
            <div class="item-desc">补充资料有助于提高通过率</div>
          </div>
          <div>
            <span :class="['item-status', contactCompleted ? 'completed' : '']">
              {{ contactCompleted ? '已完善' : '未完成' }}
            </span>
            <el-icon class="item-arrow"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 立即借款按钮 -->
    <div class="loan-button-container">
      <el-button type="primary" class="loan-button" @click="applyLoan">立即借款</el-button>
    </div>
    
    <!-- 协议文本 -->
    <div class="agreement-text">
      本人同意并授权贷款平台查询<span class="agreement-link">《个人信息查询授权》</span>、<span class="agreement-link">《个人信息使用授权协议》</span>，同意阅读相关信息至金融信用信息基础数据库<span class="agreement-link">《个人征信查询》</span>
    </div>
  </div>
</template>

<style scoped>
.user-profile-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部导航栏样式 */
.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #3a4a6d;
  color: white;
  padding: 0 15px;
}

.back-button {
  font-size: 20px;
  cursor: pointer;
}

.header-title {
  font-size: 18px;
  font-weight: 500;
}

.placeholder {
  width: 20px;
}

/* 提示信息样式 */
.profile-tip {
  background-color: #f0f0f0;
  padding: 10px 15px;
  font-size: 14px;
  color: #666;
}

/* 资料列表样式 */
.profile-list {
  margin-top: 10px;
  background-color: white;
}

.profile-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.profile-item:last-child {
  border-bottom: none;
}

.item-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  color: white;
  font-size: 20px;
}

.identity-icon {
  background-color: #409EFF;
}

.personal-icon {
  background-color: #F56C6C;
}

.bankcard-icon {
  background-color: #E6A23C;
}

.phone-icon {
  background-color: #67C23A;
}

.additional-icon {
  background-color: #20B2AA;
}

.item-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-main {
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.item-desc {
  font-size: 12px;
  color: #999;
}

.item-status {
  font-size: 14px;
  color: #909399;
  margin-right: 5px;
}

.item-status.completed {
  color: #67C23A;
}

.item-arrow {
  color: #C0C4CC;
  margin-left: 10px;
}

/* 分隔区域样式 */
.section-divider {
  background-color: #f0f0f0;
  padding: 8px 15px;
}

.divider-text {
  font-size: 14px;
  color: #666;
}

/* 补充资料项样式 */
.additional-item {
  background-color: #f9f9f9;
}

/* 立即借款按钮样式 */
.loan-button-container {
  padding: 20px 15px;
  margin-top: auto;
}

.loan-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  border-radius: 4px;
  background-color: #3a4a6d;
  border-color: #3a4a6d;
}

/* 协议文本样式 */
.agreement-text {
  padding: 0 15px 20px;
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
  text-align: center;
}

.agreement-link {
  color: #3a4a6d;
}
</style>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft, ArrowRight, User, Document, CreditCard, Iphone, Files } from '@element-plus/icons-vue'
import { ElMessage, ElLoading } from 'element-plus'
import { useUserStore, useUserInfoStore, useBankCardStore } from '@/store'
import userService from '@/services/userService'
import bankService from '@/services/bankService'

const router = useRouter()
const userStore = useUserStore()
const userInfoStore = useUserInfoStore()
const bankCardStore = useBankCardStore()
// 直接使用store中定义的计算属性
const bankCardCount = ref(bankCardStore.bankCardCount)

const initInfo = ( () => {
    userService.getUserInfo(userStore.userId)
});
const initBankCard = ( () => {
    bankService.getBankCards(userStore.userId)
});

// 在页面加载时获取用户信息
onMounted(() => { 
  initInfo(),
  initBankCard()
})

// 计算属性：检查各项信息是否已完善
const identityCompleted = computed(() => userInfoStore.hasIdentityInfo)
const personalCompleted = computed(() => userInfoStore.hasPersonalInfo)
const contactCompleted = computed(() => userInfoStore.hasOtherData)
console.log(userInfoStore.hasOtherData,userInfoStore.state.detailInfo)
// 返回上一页
const goBack = () => {
  router.back()
}

// 导航到对应的资料页面
const navigateTo = (type) => {
  const routes = {
    'identity': '/user/identity',
    'company': '/user/company-info',
    'bankcard': '/user/bank-card',
    'phone': '/user/phone-verify',
    'additional': '/user/additional'
  }
  
  if (routes[type]) {
    router.push(routes[type])
  } else {
    ElMessage.warning('该功能正在开发中')
  }
}

// 申请借款
const applyLoan = () => {
  router.replace('/')
}
</script>